import React,{useState,useEffect} from "react";
import {View,Text,StyleSheet,Image} from "react-native";
import Touchable from "../../components/Touchable";
import AsyncStorage from '@react-native-async-storage/async-storage';
import {IUserInfo} from '@/models/user';
import IconFont from '../../assets/iconfont';
import {getWidth,windowWidth,windowHeight,getHeight} from "../../utils/index";
import {IGoods} from "../../models/goods";
import {connect, ConnectedProps} from 'react-redux';
import {RootState} from '@/models/index';
import Toast from 'react-native-root-toast';

const mapStateToProps = ({goods,users}: RootState) => {
  return {
    currentUser1:users?.user,
    leavedUnuseds: goods?.leavedUnuseds,
  };
};
const connector = connect(mapStateToProps);
type ModelState = ConnectedProps<typeof connector>;
interface IProps extends ModelState {
  navigation: {navigate: any};
  // route: {params: {selectedId: string}};
  route: any;
}
const Order = (props:IProps) => {
  const {leavedUnuseds,route,navigation,currentUser1} = props;
  const [currentUser, setCurrentUser] = useState<IUserInfo>(currentUser1 ? currentUser1[0]:{});
  const [selectGood,setSelectGood] = useState<IGoods>();
  useEffect(()=>{
    // getCurrentUserInfo();
    if(leavedUnuseds && leavedUnuseds[0].goods && route.params.goods_id){
      leavedUnuseds[0].goods.map(item => {
        console.log("route.params.goods_id",route.params.goods_id)
        if(item.goods_id === route.params.goods_id){
          setSelectGood(item);
          console.log("选中的商品",item);
        }
      });
    }
  },[])
  // const getCurrentUserInfo = async () => {
  //   let currentUserInfo: string | null = '';
  //   currentUserInfo = await AsyncStorage.getItem('currentUserInfo');
  //   if (currentUserInfo) {
  //     console.log("currentUserInfo",currentUserInfo)
  //     setCurrentUser(JSON.parse(currentUserInfo));
  //   }
  // };
  const handlePress = () => {
    if(currentUser.Address){
      if( currentUser.Address.length <= 0 ){
        Toast.show('请先到我的-收货地址页面创建地址再提交订单', {
          position: Toast.positions.CENTER,
          duration: Toast.durations.LONG,
          shadow: true,
          animation: true,
        });
      }
    }else {
      // 集成支付宝SDK
    }
  }
  return (
    <View style={styles.orderBox}>
      <View style={styles.address}>
     {
      JSON.stringify(currentUser) !== "{}" && currentUser.Address && currentUser.Address.length >0 ? 
        (
          <View style={styles.address1}>
             <View style={styles.aTop}>
             <IconFont name="icon-dingwei1" size={30} color={'#A75E5E'}></IconFont>
              <Text style={styles.topText}>{currentUser.Address[0].address_message}</Text>
             </View>
              <View style={styles.aBottom}>
                <Text>收货人名称：{currentUser.Address[0].Consigner_name}</Text>
                <Text>收货人手机号：{currentUser.Address[0].consigner_phone}</Text>
              </View>
          </View>
        
      ):<Touchable style={styles.noAddress} 
      onPress={async()=>{
         // 在点击购买时已经验证过用户是否登录，此处不需要再验证
          navigation.navigate("Address",);
        
        }
      }>
        <Text style={styles.toast}>你还没有收货地址，去我的页面添加哦!!!</Text>
      </Touchable>
     }
      </View>
      <View style={styles.goods}>
        <View style={styles.good}>
          <Image source={{uri:selectGood?.goods_image}} style={styles.image}/>
          <View>
          <Text style={styles.money}>
            ￥:{selectGood?.money}
          </Text>
          <Text style={styles.title}>
            {selectGood?.goods_title}
          </Text>
          </View>
        </View>
        <View style={styles.buniess}>
          <Text style={styles.bText}>商家:{selectGood?.buniness.business_name}</Text>
          <Text  style={styles.bText}>发货地:{selectGood?.goods_place}</Text>
        </View>
      </View>
      <Touchable style={styles.btn} onPress={handlePress}>
        <Text style={styles.btnText}>提交订单</Text>
      </Touchable>
    </View>
  )
}
const styles = StyleSheet.create({
  orderBox:{
    flex:1,
    width:"100%",
    padding:15,
    backgroundColor:"#fff"
  },
  address:{
    height:120,
    backgroundColor:"#F6F2F2",
    paddingHorizontal:18
  },
  noAddress:{
    width:"100%",
    height:"100%"
  },
  toast:{
    color:"#A75E5E",
    paddingTop:30
  },
  goods:{
    marginTop:20,
    height:300,
    backgroundColor:"#F6F2F2"
  },
  good:{
    height:130,
    margin:20,
    marginTop:30,
    borderRadius:5,
    backgroundColor:"#fff",
    display:"flex",
    flexDirection:"row",
    alignItems:"center"
  },
  image:{
    width:100,
    height:100,
    borderRadius:5,
    marginHorizontal:20,
  },
  money:{
    color:"#A75E5E",
    fontSize:20,
    fontWeight:"700"
  },
  title:{
    fontWeight:"700"
  },
  buniess:{
    display:"flex",
    alignItems:"flex-end",
    paddingRight:20,
  },
  bText:{
    fontSize:16,
    fontWeight:"700",
    paddingVertical:3
  },
  btn:{
    width:"100%",
    height:60,
    marginTop:20,
    display:"flex",
    justifyContent:"center",
    alignItems:"center",
  },
  btnText:{
    width:getWidth(50),
    height:45,
    lineHeight:45,
    color:"#fff",
    fontSize:20,
    textAlign:"center",
    backgroundColor:"#A75E5E",
    borderRadius:30,
  },
  address1: {
    paddingVertical:10,
  },
  aTop:{
    display:"flex",
    flexDirection:"row",
    alignItems:"center"
  },
  topText:{
    fontSize:18,
    paddingLeft:10
  },
  aBottom: {
    marginTop:10,
  }
})
export default connector(Order);